<!--
产品管理—参考行程页
凌辉
2017-5-25
-->
<template>
  <el-row id="route">
    <el-col style="margin-bottom: 20px;margin-left: 10%">
      <!--<Col span="12">-->
      <!--<Time-picker format="HH:mm" placeholder="选择时间" style="width: 112px"></Time-picker>-->
      <!--</Col>-->
      <!--<Col span="12">-->
      <!--<Time-picker format="HH:mm" type="timerange" placement="bottom-end" placeholder="选择时间"-->
      <!--style="width: 168px"></Time-picker>-->
      <!--</Col>-->
      <span style="color: #f00;">*</span><span>天数：</span>
      <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="daysNum" type="number"
                @blur="daysNumBlur" @change="dayChange"
                min="0" style="width: 122px"
                size="small"/>
      <span style="margin-left: 20px;color: #f00">*</span><span>晚数：</span>
      <el-input :disabled="pageType === 'look'||pageType === 'audits'" style="width: 122px;" size="small" type="number"
                v-model="nightNum"
                @blur="daysNumBlur"/>
      <span style="color: #f00" v-if="daysNightBol"> 天数与晚数都不能为空</span>
    </el-col>
    <el-col v-for="(timeTotals,indxe) in dayList" v-if="daysNum > 0" :key="indxe">
      <el-col style="line-height: 50px;" :span="2">
        <span style="font-size:20px;font-weight: bold">第{{timeTotals.dayNumber}}天</span>
      </el-col>
      <el-col :span="22">
        <el-col style="line-height: 50px;">
          <span>天数序号：</span>
          <el-input :disabled="pageType === 'look'||pageType === 'audits'" style="width: 122px"
                    v-model="timeTotals.dayNumber"
                    disabled></el-input>
          <span style="margin-left: 20px">当天主题：</span>
          <el-input :disabled="pageType === 'look'||pageType === 'audits'" style="width: 740px"
                    v-model="timeTotals.dayTitle"></el-input>
        </el-col>
        <el-col style="line-height: 50px;">
          <span>行程时段：</span>
          <el-button :disabled="pageType === 'look'||pageType === 'audits'"
                     style="border-color: #FF9900;color: #FF9900;"
                     @click="addTimePhase(timeTotals)">+新增时段
          </el-button>
          <span style="color: #00a0e9;margin-left: 20px;"
                @click="timeShowMet(timeTotals)" v-if="pageType !== 'look'">{{timeTotals.timeTotalText}}</span>
        </el-col>
        <el-col v-for="(item,index) in timeTotals.tripList" v-if="timeTotals.timeShow" :key="index">
          <el-col style="width: 96%;margin-top: 20px;line-height: 50px;background-color: rgba(242, 249, 227, 1)">
            <span style="margin-left: 20px;color: #f00;width: 60px;">*</span><span>时段：</span>
            <el-input size="small" :disabled="pageType === 'look'||pageType === 'audits'" @change="changeTimeFun(item)"
                      placeholder="00:00"
                      v-model="item.tripStartTime"
                      class="tc" @blur="checkText(item)" :maxlength="5" style="width: 70px"></el-input>
            -
            <el-input size="small" :disabled="pageType === 'look'||pageType === 'audits'"
                      @change="changeTimeFunEnd(item)" placeholder="00:00"
                      v-model="item.tripEndTime"
                      class="tc" @blur="checkTextEnd(item)" :maxlength="5" style="width: 70px"></el-input>
            <span style="margin-left: 10px;">序号：</span>
            <el-input style="width: 50px" size="small" v-model="item.tripNumber" disabled></el-input>
            <el-select :disabled="pageType === 'look'||pageType === 'audits'" size="small" v-model="item.tripType"
                       style="margin-left: 10px;width: 100px;" @change="tripTypeSel(item)">
              <el-option value="" label="行程类型"></el-option>
              <el-option value="gather" label="集合"></el-option>
              <el-option value="traffic" label="交通"></el-option>
              <el-option value="meals" label="餐食"></el-option>
              <el-option value="hotel" label="住宿"></el-option>
              <el-option value="spot" label="景点"></el-option>
              <el-option value="free" label="自由活动"></el-option>
              <el-option value="shopping" label="购物"></el-option>
            </el-select>
            <el-select :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.trafficType"
                       v-if="item.tripType==='traffic'"
                       size="small"
                       style="margin-left: 10px;width: 100px;">
              <el-option value="" label="交通方式"></el-option>
              <el-option value="bus" label="大巴"></el-option>
              <el-option value="train" label="火车"></el-option>
              <el-option value="hTrain" label="高铁"></el-option>
              <el-option value="flight" label="飞机"></el-option>
              <el-option value="ship" label="轮船"></el-option>
            </el-select>
            <span style="color: #00a0e9;margin-left: 60px"
                  @click="deleteTime(timeTotals.tripList,item.tripNumber)" v-if="pageType !== 'look'"> 删除 </span>
            <span style="color: #00a0e9;margin-left: 10px;" @click="showTimePhase(item)" v-if="pageType !== 'look'">{{item.phaseText}}</span>
          </el-col>
          <el-col v-if="item.bol&&item.tripType!==''&&item.tripType!=='meals'">
            <el-col style="line-height: 60px">
              <span style="width: 65px;">{{item.routeTitle}}：</span>
              <el-input :disabled="pageType === 'look'||pageType === 'audits'" style="width: 90%"
                        v-model="item.tripTitle"></el-input>
            </el-col>
            <el-col>
              <el-col style="width: 65px;">
                <span>{{item.routeRemork}}：</span>
              </el-col>
              <el-col style="width: 90%;">
                <quill-editor ref="myTextEditor" @focus="onEditorFocus($event)" v-model="item.tripDescribe"
                              :config="editorOption"></quill-editor>
              </el-col>
            </el-col>
          </el-col>
          <el-col v-if="item.bol&&item.tripType==='meals'" style="margin-left: 25px;margin-top: 10px;">
            <el-col>
              <span>用餐：</span>
            </el-col>
            <el-col>
              <el-col style="width: 60px;line-height: 38px;">
                <el-checkbox :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.checked1">早餐
                </el-checkbox>
                <el-checkbox :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.checked2"
                             style="margin: 0px;">午餐
                </el-checkbox>
                <el-checkbox :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.checked3"
                             style="margin: 0px;">晚餐
                </el-checkbox>
              </el-col>
              <el-col style="width: 140px;line-height: 39px;">
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio1"
                          label="包含">包含
                </el-radio>
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio1"
                          label="自理">自理
                </el-radio>
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio2"
                          label="包含">包含
                </el-radio>
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio2"
                          label="自理">自理
                </el-radio>
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio3"
                          label="包含">包含
                </el-radio>
                <el-radio :disabled="pageType === 'look'||pageType === 'audits'" class="radio" v-model="item.radio3"
                          label="自理">自理
                </el-radio>
              </el-col>
              <el-col style="width: 50%;line-height: 35px;">
                <span>用餐时间：约</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.minute1"
                          style="width: 10%" size="small"/>
                <span>分钟</span>
                <span style="margin-left: 20px">用餐备注：</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.remark1"
                          style="width: 50%" size="small"/>
              </el-col>
              <el-col style="width: 50%;line-height: 40px;">
                <span>用餐时间：约</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.minute2"
                          style="width: 10%" size="small"/>
                <span>分钟</span>
                <span style="margin-left: 20px">用餐备注：</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.remark2"
                          style="width: 50%" size="small"/>
              </el-col>
              <el-col style="width: 50%;line-height: 40px;">
                <span>用餐时间：约</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.minute3"
                          style="width: 10%" size="small"/>
                <span>分钟</span>
                <span style="margin-left: 20px">用餐备注：</span>
                <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="item.remark3"
                          style="width: 50%" size="small"/>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-col>
    <el-col>
      <el-button type="primary" :disabled="pageType === 'look'||pageType === 'audits'" @click="handleSubmit"
                 style="margin-top: 20px;margin-left: 20px;" :loading="saveNextLoading">保存并下一步
      </el-button>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import {quillEditor} from 'vue-quill-editor' // 导入quillEditor组件
  export default {
    props: {
      productIdConfig: {
        type: Number
      },
      pageType: {
        type: String
      }
    },
    data () {
      return {
        saveNextLoading: false,
        editorOption: {},
        daysNum: '',
        nightNum: '',
        daysNightBol: false,
        loginType: '',
        productTourTrip: {
          id: '',
          productId: '',
          dayNumber: '',
          dayTitle: '',
          tripNumber: '',
          tripTitle: '',
          tripStartTime: '00:00',
          tripEndTime: '00:00',
          tripType: '',
          trafficType: '',
          tripDescribe: '',
          bol: false,
          phaseText: '隐藏',
          checked1: false,
          checked2: false,
          checked3: false,
          radio1: '自理',
          radio2: '自理',
          radio3: '自理',
          remark1: '',
          remark2: '',
          remark3: '',
          minute1: '',
          minute2: '',
          minute3: '',
          routeTitle: '行程标题',
          routeRemork: '行程描述'
        },
        tripList: [],
        timeTotal: {
          timeShow: false,
          timeTotalText: '隐藏',
          dayTitle: '',
          dayNumber: '',
          tripList: []
        },
        dayList: []
      }
    },
    methods: {
      onEditorFocus (editor) {
        if (this.pageType === 'look' || this.pageType === 'audits') {
          editor.enable(false)
        }
      },
      changeTimeFun (val) {
        var teg = new RegExp('^(0\\d{1}|1\\d{1}|2[0-3]):([0-5]\\d{1})$')
        if (val.tripStartTime.length === 2) {
          val.tripStartTime = (val.tripStartTime + ':')
        } else if (val.tripStartTime.length === 5) {
          if (!teg.test(val.tripStartTime)) {
            val.tripStartTime = '00:00'
          } else {
            var st1 = val.tripStartTime.substring(0, 2)
            var st2 = val.tripStartTime.substring(3, 5)
            if (isNaN(st1) || isNaN(st2)) { // 不是数字
              val.tripStartTime = '00:00'
            }
          }
        }
      },
      // 判断工作时间格式
      checkText (val) {
        var teg = new RegExp('^(0\\d{1}|1\\d{1}|2[0-3]):([0-5]\\d{1})$')
        if ((!teg.test(val.tripStartTime) || val.tripStartTime.length < 5) && val.tripStartTime !== '') {
          val.tripStartTime = '00:00'
        }
      },
      changeTimeFunEnd (val) {
        var teg = new RegExp('^(0\\d{1}|1\\d{1}|2[0-3]):([0-5]\\d{1})$')
        if (val.tripEndTime.length === 2) {
          val.tripEndTime = (val.tripEndTime + ':')
        } else if (val.tripEndTime.length === 5) {
          if (!teg.test(val.tripEndTime)) {
            val.tripEndTime = '00:00'
          } else {
            var st1 = val.tripEndTime.substring(0, 2)
            var st2 = val.tripEndTime.substring(3, 5)
            if (isNaN(st1) || isNaN(st2)) { // 不是数字
              val.tripEndTime = '00:00'
            }
          }
        }
      },
      // 判断工作时间格式
      checkTextEnd (val) {
        var teg = new RegExp('^(0\\d{1}|1\\d{1}|2[0-3]):([0-5]\\d{1})$')
        if ((!teg.test(val.tripEndTime) || val.tripEndTime.length < 5) && val.tripEndTime !== '') {
          val.tripEndTime = '00:00'
        }
      },
      tripTypeSel (val) {
        if (val.tripType === 'gather') {
          val.routeTitle = '集合标题'
          val.routeRemork = '集合描述'
        } else if (val.tripType === 'traffic') {
          val.routeTitle = '交通标题'
          val.routeRemork = '交通描述'
        } else if (val.tripType === 'hotel') {
          val.routeTitle = '住宿标题'
          val.routeRemork = '住宿描述'
        } else if (val.tripType === 'spot') {
          val.routeTitle = '景点标题'
          val.routeRemork = '景点描述'
        } else if (val.tripType === 'free') {
          val.routeTitle = '活动标题'
          val.routeRemork = '活动描述'
        } else if (val.tripType === 'shopping') {
          val.routeTitle = '购物标题'
          val.routeRemork = '购物描述'
        }
      },
      //  删除时段
      deleteTime (val, number) {
        var index = this.indexOf(val, number)
        if (index > -1) {
          val.splice(index, 1)
        }
      },
      //  获取需要删除的时段下标
      indexOf (val, number) {
        for (var i = 0; i < val.length; i++) {
          if (val[i].tripNumber === number) return i
        }
        return -1
      },
      daysNumBlur () {
        if (this.daysNum === '' || this.nightNum === '') {
          this.daysNightBol = true
          return false
        } else {
          this.daysNightBol = false
          return true
        }
      },
      dayChange () {
        let len = this.dayList.length
        let count = this.daysNum - len
        if (count > 0) {
          for (var i = 0; i < count; i++) {
            this.timeTotal = {
              timeShow: false,
              timeTotalText: '隐藏',
              dayTitle: '',
              dayNumber: len + i + 1,
              tripList: []
            }
            this.dayList.push(this.timeTotal)
          }
        } else {
          let subtractList = Math.abs(count)
          for (var k = 0; k < subtractList; k++) {
            this.dayList.pop()
          }
        }
      },
      checkSubmit () {
        if (this.daysNum === '' || this.daysNum <= 0) {
          this.$message({
            message: '请填写天数',
            type: 'error'
          })
          this.daysNightBol = true
          return false
        }
        if (this.nightNum === '') {
          this.$message({
            message: '请填写晚数',
            type: 'error'
          })
          this.daysNightBol = true
          return false
        }
        for (var i = 0; i < this.dayList.length; i++) {
          if (this.dayList[i].dayTitle === '') {
            this.$message({
              message: '请填写第' + (i + 1) + '天的主标题',
              type: 'error'
            })
            return false
          }
          if (this.dayList[i].tripList.length <= 0) {
            this.$message({
              message: '请增加第' + (i + 1) + '天的时段',
              type: 'error'
            })
            return false
          }
          for (var k = 0; k < this.dayList[i].tripList.length; k++) {
            if (this.dayList[i].tripList[k].tripStartTime === '' || this.dayList[i].tripList[k].tripEndTime === '') {
              this.$message({
                message: '第' + (i + 1) + '天的第' + (k + 1) + '时段填写时间出现错误',
                type: 'error'
              })
              return false
            }
            var startTime = Number((this.dayList[i].tripList[k].tripStartTime.replace(':', '')))
            var endTIme = Number((this.dayList[i].tripList[k].tripEndTime.replace(':', '')))
            if (startTime > endTIme) {
              this.$message({
                message: '第' + (i + 1) + '天的第' + (k + 1) + '时段开始时间不能大于结束时间',
                type: 'error'
              })
              return false
            }
            if (this.dayList[i].tripList[k].tripType === '') {
              this.$message({
                message: '请选择第' + (i + 1) + '天的第' + (k + 1) + '时段的行程类型',
                type: 'error'
              })
              return false
            }
            if (this.dayList[i].tripList[k].tripDescribe === '' && this.dayList[i].tripList[k].tripType !== 'meals') {
              this.$message({
                message: '请填写第' + (i + 1) + '天的第' + (k + 1) + '时段的行程描述',
                type: 'error'
              })
              return false
            }
          }
        }
        return true
      },
      handleSubmit () {
        if (this.productIdConfig <= 0) {
          this.$message({
            message: '请先填写基本信息',
            type: 'error'
          })
          this.$emit('saveNext', '0')
          return
        }
        var bbl = this.checkSubmit()
        if (!bbl) {
          return
        }
        var url = '/tour/web/productTourTrip/save.htm'
        var para = {
          dayList: this.dayList,
          type: this.loginType,
          daysNum: this.daysNum,
          nightNum: this.nightNum
        }
        this.saveNextLoading = true
        this.$http.post(url, para).then(response => {
          this.saveNextLoading = false
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.$emit('saveNext', '3')
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            this.$alert(resBody.errorMsg, ' ', {
              type: 'warning'
            }).then(() => {
              this.$router.push({path: '/login'})
              sessionStorage.clear()
            })
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      //  添加时段
      addTimePhase (val) {
        var number = val.tripList.length
        val.tripList.productTourTrip = {
          id: '',
          productId: this.productIdConfig,
          dayNumber: val.dayNumber,
          dayTitle: val.dayTitle,
          tripNumber: number + 1,
          tripTitle: '',
          tripStartTime: '00:00',
          tripEndTime: '00:00',
          tripType: '',
          trafficType: '',
          tripDescribe: '',
          bol: true,
          phaseText: '隐藏',
          checked1: false,
          checked2: false,
          checked3: false,
          radio1: '自理',
          radio2: '自理',
          radio3: '自理',
          remark1: '',
          remark2: '',
          remark3: '',
          minute1: '',
          minute2: '',
          minute3: '',
          routeTitle: '行程标题',
          routeRemork: '行程描述'
        }
        val.tripList.push(val.tripList.productTourTrip)
        val.timeShow = true
        val.tripList = val.tripList
      },
      showTimePhase (val) {
        val.bol = !val.bol
        if (val.bol) {
          val.phaseText = '隐藏'
        } else {
          val.phaseText = '展开'
        }
      },
      timeShowMet (val) {
        val.timeShow = !val.timeShow
        if (val.timeShow) {
          val.timeTotalText = '隐藏'
        } else {
          val.timeTotalText = '展开'
        }
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.loginType = user.type
      }
      if (this.productIdConfig > 0) {
        var para = {
          productId: this.productIdConfig,
          type: this.loginType
        }
        this.$http.post('/tour/web/productTourTrip/getByCondition.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.dayList = resBody.result
            this.daysNum = resBody.daysNum
            this.nightNum = resBody.nightNum
          }
        })
      }
    },
    components: {
      quillEditor
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .el-radio + .el-radio {
    margin: 0px;
  }

  #route
    .el-input__inner {
      height: 30px !important
    }
    .ql-container .ql-editor {
      min-height: 16em;
      padding-bottom: 1em;
      max-height: 25em;
    }

</style>
